<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        {{msg}}
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    Vue.config.productionTip = false;
    var vm = new Vue({
        el:"#app",
        data:{
          msg:"msg"
        },
        beforeCreate(){
            //只是完成了 vue自定义事件的初始化 注册了部分生命周期钩子
            console.log("beforeCreate")
        },
        created(){
            //完成了数据的转绑 完成了数据的响应式
            //如果想要通过改变data中的数据 来触发界面更新的话 最早只能在created钩子中
            //发送请求去后台获取数据 将获取的数据展示在界面上  this.msg = 获取来的数据
            //ajax请求最早只能在created钩子中发送
            console.log("created")
        },
        beforeMount(){
            //刚刚完成模板解析
            console.log("beforeMount")
        },
        mounted(){
            //将解析完的模板 挂载到了 el上
            //最早可以进行dom操作的地方!!!!  所有的动效最早在mounted中创建
            console.log(this.$el)
            console.log("mounted")
            this.timer = setInterval(()=>{
                console.log("setInterval")
            },1000)
        },
        beforeUpdate(){
            //响应式数据改变 在界面重新渲染之前执行的钩子
            console.log("beforeUpdate")
        },
        updated(){
            //响应式数据改变 在界面重新渲染之后执行的钩子
            console.log("updated")
        },
        beforeDestroy(){
            console.log("beforeDestroy")
        },
        destroyed(){
            //收尾工作
            clearInterval(this.timer)
            console.log("destroyed")
        }
    })



</script>
</html>